<template>
  <div>
    <div id="app">
      <router-view v-if="!$route.meta.inside" />
      <el-container id="aside" v-if="$route.meta.inside">
        <AsideSpace :menu_state="aside_state" />
        <el-container>
          <el-header
              :height="head_height"
              :style="{
              backgroundColor: menu_color.head_background_color,
              minWidth: '800px',
            }"
          >
            <HeadSpace @aside_state="change_state" />
          </el-header>
          <div id="tab">
            <TabSpace v-if="tabs_state" :style="{ backgroundColor: menu_color.main_background_color }"/>
          </div>
          <el-main
              id="main"
              :style="{ backgroundColor: menu_color.main_background_color }"
          >
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    HeadSpace: (resolve) => {
      require(["@/components/system/HeadSpace"], resolve);
    },
    AsideSpace: (resolve) => {
      require(["@/components/system/AsideSpace"], resolve);
    },
    TabSpace:resolve=>{require(['@/components/system/TabSpace'],resolve)}
  },
  data() {
    return {
      tab_data: [],
      aside_state: false,
      tabs_state: true,
      menu_color:JSON.parse(sessionStorage.getItem("menu_color")),
    };
  },
  methods: {
    change_state(state) {
      this.aside_state = state;
    },
    innital_color() {
      this.color_form = {
        aside_background_color: "#000000",
        aside_text_color: "#ffffff",
        aside_icon_color: "#ffffff",
        aside_active_text_color: "#67C23A",
        aside_title_text_color: "#fff",
        aside_title_back_color: "#409EFF",
        aside_title_height: 60,
        aside_width: 200,
        aside_small_width: 65,
        head_icon_color: "#606266",
        head_background_color: "#fff",
        head_text_color: "#606266",
        head_active_text_color: "#303133",
        head_height: 60,
        main_background_color: "#f2f6fc",
      };
      sessionStorage.setItem("menu_color", JSON.stringify(this.color_form));
      this.menu_color = JSON.parse(sessionStorage.getItem("menu_color"));
    },
  },
  mounted(){
    if (sessionStorage.getItem("menu_color") == null) {
      this.innital_color();
    }
  },
  watch: {
    $route() {
      this.tabs_state = false;
      let data = {
        title: this.$route.meta.title,
        path: this.$route.path,
      };
      if (this.tab_data.length != 0) {
        for (let index = 0; index < this.tab_data.length; index++) {
          if (this.tab_data[index].path == this.$route.path) {
            break;
          } else if (index == this.tab_data.length - 1) {
            this.tab_data.splice(0, 0, data);
            break;
          }
        }
      } else {
        this.tab_data.splice(0, 0, data);
      }
      sessionStorage.setItem("tab_data", JSON.stringify(this.tab_data));
      setTimeout(() => {
        this.tabs_state = true;
      }, 5);
    },
  },
};
</script>
<style scoped>
#app{
  background-color: #f2f6fc;
}
</style>

